<template>
    <el-table :data="tableData" border highlight-current-row ref="table" @selection-change="selectionChange" @row-click="rowClick">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
        <el-table-column property="name" label="用户组名称" align="center"></el-table-column>
        <el-table-column property="locks" label="状态" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.locks === 1" style="color: green;">已启用</span>
                <span v-if="scope.row.locks === 0" style="color: #f00;">已禁用</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">                             
                <el-button type="text" size="small" v-if="scope.row.name !== '系统管理员' && scope.row.name !== '操作员组'" @click.stop="update(scope.row.id)">修改</el-button>               
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
export default {
    data() {
        return {
            tableData: this.$store.state.userGroupStore.tableData,
            isHighLigthStatus: false
        }
    },
    watch: {
        tableData(newVal) {
            this.$refs.table.setCurrentRow(newVal[0]);
        }
    },
    methods: {
        selectionChange(arr) {
            this.$store.commit('userGroupStore/multipleSelection', arr);
        },
        rowClick(row) {
            this.$store.commit('userGroupStore/updateTableRow', row);
            this.$store.dispatch('userGroupStore/getMenuPermissionByTableRowId', row['id']);
        },
        update(id) {
            this.$store.commit('userGroupStore/updateTableRowId', id);
            this.$util.openLayerIframe({title: '用户组-修改', zIndex: 13, width: '450px', height: '180px', url: this.$domain + '/#/basicData/userGroup/form'});
        }
    }
}
</script>